<template>
  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" v-if="!updateActionDate.state" @click="toEdit">
        修改
      </a-button>
      <a-button type="primary" style="margin-left: 10px" @click="toSubmit"
                v-if="updateActionDate.state">
        保存
      </a-button>
      <a-button type="primary" style="margin-left: 10px" @click="toCancel"
                v-if="updateActionDate.state">
        返回
      </a-button>
    </template>
    <div class="table-page-search-wrapper">
      <a-card :loading="loading" title="公司信息">
        <a-form v-if="updateActionDate.data!=null" :layout="'inline'">
          <a-row :gutter="48">
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="公司全称">
                <a-input :read-only="!updateActionDate.state" v-model="updateActionDate.data.info.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="公司地址">
                <a-input :read-only="!updateActionDate.state" v-model="updateActionDate.data.info.address"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="公司电话">
                <a-input :read-only="!updateActionDate.state" v-model="updateActionDate.data.info.tel"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="公司传真">
                <a-input :read-only="!updateActionDate.state" v-model="updateActionDate.data.info.fax"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="公司邮箱">
                <a-input :read-only="!updateActionDate.state" v-model="updateActionDate.data.info.mail"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-divider/>

          <a-row :gutter="48">
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="客服电话">
                <a-input :read-only="!updateActionDate.state"
                         v-model="updateActionDate.data.info.servicePhone"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :xs="24">
              <a-form-item label="客服邮箱">
                <a-input :read-only="!updateActionDate.state"
                         v-model="updateActionDate.data.info.serviceMail"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>
      </a-card>
      <a-card :loading="loading" title="外链地址" style="margin-top: 10px">
        <template #extra>
          <a-button type="primary" @click="toEditIcon(null)" :disabled="!updateActionDate.state">添加</a-button>
        </template>
        <div class="icon-list-outer" v-if="updateActionDate.data!=null">
          <a-table :columns="columns" bordered :data-source="updateActionDate.data.info.iconList" :loading="loading"
                   size="small">
            <span slot="imgUrl" slot-scope="value">
              <img style="width: 50px;height: 50px;" :src="value">
            </span>
            <span slot="action" slot-scope="value,record,index">
              <a-button type="primary" @click="toEditIcon(index)" :disabled="!updateActionDate.state">点击修改</a-button>
              <a-button shape="circle" @click="iconUp(index)" icon="up" :disabled="!updateActionDate.state||index==0"
                        style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
              <a-button shape="circle" @click="iconDown(index)" icon="down"
                        :disabled="!updateActionDate.state||index==updateActionDate.data.info.iconList.length-1"
                        style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
              <a-button type="danger" @click="toDeleteIcon(index)" :disabled="!updateActionDate.state"
                        style="margin-left: 5px;">点击删除</a-button>
            </span>
          </a-table>
        </div>
        <a-modal v-model:visible="updateIconActionDate.state" @ok="toSubmitEditIcon" @cancel="toCancelEditIcon">
          <div v-if="updateIconActionDate.state">
            <a-form layout="inline" style="margin-bottom: 5px;margin-top: 10px;width: 100%" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 14 }">
              <a-form-item label="外链名称" style="width: 100%">
                <a-input v-model="updateIconActionDate.data.name" style="width: 100%"></a-input>
              </a-form-item>
              <a-form-item label="外链链接" style="width: 100%">
                <a-input v-model="updateIconActionDate.data.url" style="width: 100%"></a-input>
              </a-form-item>
              <a-form-item style="width: 100%">
                  <template #label>
                    <div
                      style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                      外链图标
                      <a-tooltip placement="right">
                        <template slot="title">
                          格式：png、jpeg、jpg<br/>
                          尺寸：100px * 100px
                        </template>
                        <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                      </a-tooltip>
                    </div>
                  </template>


                <a-upload
                  list-type="picture-card"
                  :file-list="mainImage"
                  @preview="()=>{}"
                  :custom-request="handleUploadMainImage"
                  @change="handleMainImageChange"
                >
                  <div v-if="mainImage.length==0&&updateActionDate.state">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">
                      Upload
                    </div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-form>
          </div>
        </a-modal>
      </a-card>
      <a-card :loading="loading" title="页脚链接列表" style="margin-top: 10px">
        <template #extra>
          <a-button type="primary" @click="toEditPage(null)" :disabled="!updateActionDate.state">添加</a-button>
        </template>
        <div class="icon-list-outer" v-if="updateActionDate.data!=null">
          <a-table :columns="pageColumns" bordered :data-source="updateActionDate.data.info.pageList" :loading="loading"
                   size="small">
            <span slot="action" slot-scope="value,record,index">
              <a-button type="primary" @click="toEditPage(index)" :disabled="!updateActionDate.state">点击修改</a-button>
              <a-button shape="circle" @click="pageUp(index)" icon="up" :disabled="!updateActionDate.state||index==0"
                        style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
              <a-button shape="circle" @click="pageDown(index)" icon="down"
                        :disabled="!updateActionDate.state||index==updateActionDate.data.info.pageList.length-1"
                        style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
              <a-button type="danger" @click="toDeletePage(index)" :disabled="!updateActionDate.state"
                        style="margin-left: 5px;">点击删除</a-button>
            </span>
          </a-table>
        </div>
        <a-modal v-model:visible="updatePageActionDate.state" @ok="toSubmitEditPage" @cancel="toCancelEditPage">
          <div v-if="updatePageActionDate.state">
            <a-form layout="inline" style="margin-bottom: 5px;margin-top: 10px;width: 100%" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 14 }">
              <a-form-item label="外链名称" style="width: 100%">
                <a-input v-model="updatePageActionDate.data.name" style="width: 100%"></a-input>
              </a-form-item>
              <a-form-item style="width: 100%">

                <template #label>
                  <div
                    style="display: inline-flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;">
                    外链链接
                    <a-tooltip placement="right">
                      <template slot="title">
                        以http开头的网址或自定义页面中的页面链接字段
                      </template>
                      <a-icon type="info-circle" style="margin: 0 5px;font-size: 16px;"/>
                    </a-tooltip>
                  </div>
                </template>

                <a-input v-model="updatePageActionDate.data.url" style="width: 100%"></a-input>
              </a-form-item>
            </a-form>
          </div>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {addCompany, searchCompany} from "@/api/modules/CompanyRequest";
import {notification} from "ant-design-vue";
import {uploadPhoto} from "@/api/image";

const columns = [
  {
    dataIndex: 'imgUrl',
    title: '外链图标',
    scopedSlots: {customRender: 'imgUrl'},
  },
  {
    dataIndex: 'name',
    title: '外链名称'
  },
  {
    dataIndex: 'url',
    title: '外链链接'
  },
  {
    "title": "操作",
    scopedSlots: {customRender: 'action'},
  },
]
const pageColumns = [
  {
    dataIndex: 'name',
    title: '链接名称'
  },
  {
    dataIndex: 'url',
    title: '链接地址'
  },
  {
    "title": "操作",
    scopedSlots: {customRender: 'action'},
  },
]
export default {
  name: "WebsiteConfig",
  data() {
    return {
      updateActionDate: {
        state: false,
        data: null
      },
      data: null,
      loading: false,
      columns,
      pageColumns,
      updateIconActionDate: {
        state: false,
        index: null,
        data: null
      },
      updatePageActionDate: {
        state: false,
        index: null,
        data: null
      },
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.loading = true;
      await this.refreshData();
      this.loading = false;
    },
    async refreshData() {
      let _this = this;
      await searchCompany().then((res) => {
        if (res.data.info != null) {
          try {
            res.data.info = JSON.parse(res.data.info)
          } catch (e) {
            res.data.info = {
              iconList: [],
              pageList: []
            }
          }
        } else res.data.info = {
          iconList: [{
            name: '1',
            url: '132131',
            imgUrl: '1',
          }, {
            name: '1',
            url: '1212222',
            imgUrl: '1',
          }, {
            name: '1',
            url: '13132131',
            imgUrl: '11111111111111111',
          },],
          pageList: []
        }

        _this.data = res.data
        _this.updateActionDate.data = JSON.parse(JSON.stringify(_this.data))
      });
    },
    toEdit() {
      this.updateActionDate.state = true;
    },
    toCancel() {
      this.updateActionDate.data = JSON.parse(JSON.stringify(this.data))
      this.updateActionDate.state = false;
    },
    toLog(e) {
      console.log(e)
    },
    async toSubmit() {
      if (this.loading) return;
      let _this = this;
      this.loading = true;
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data))
      delete data.createAt
      delete data.id
      delete data.updateAt
      data.info = JSON.stringify(data.info)
      await addCompany(data).then(async (res) => {
        notification.success({
          message: '修改成功'
        })
        await _this.refreshData();
        _this.updateActionDate.state = false;
        _this.loading = false;
      }).catch((res) => {
        notification.warning(res)
      })
    },



    toEditIcon(index) {
      if(index!=null)this.updateIconActionDate.data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.iconList[index]))
      else this.updateIconActionDate.data={
        imgUrl:null,
        url:null,
        name:null
      }

      this.updateIconActionDate.index = index
      this.updateIconActionDate.state = true;
    },
    toSubmitEditIcon() {

      if(this.updateIconActionDate.data.name==null||this.updateIconActionDate.data.name.toString().trim().length==0){
        this.$notification.warning({
          message:'请填写名字'
        })
        return
      }
      if(this.updateIconActionDate.data.imgUrl==null||this.updateIconActionDate.data.imgUrl.toString().trim().length==0){
        this.$notification.warning({
          message:'请上传图片'
        })
        return
      }
      if(this.updateIconActionDate.data.url==null||this.updateIconActionDate.data.url.toString().trim().length==0){
        this.$notification.warning({
          message:'请填写链接'
        })
        return
      }

      if(this.updateIconActionDate.index!=null){
        this.updateActionDate.data.info.iconList[this.updateIconActionDate.index].name =   this.updateIconActionDate.data.name
        this.updateActionDate.data.info.iconList[this.updateIconActionDate.index].imgUrl = this.updateIconActionDate.data.imgUrl
        this.updateActionDate.data.info.iconList[this.updateIconActionDate.index].url =    this.updateIconActionDate.data.url
      }else {
        this.updateActionDate.data.info.iconList.push(this.updateIconActionDate.data)
      }
      this.updateIconActionDate = {
        state: false,
        index: null,
        data: null
      }
    },
    toDeleteIcon(index) {
      this.updateActionDate.data.info.iconList.splice(index, 1)
    },
    toCancelEditIcon() {
      this.updateIconActionDate = {
        state: false,
        index: null,
        data: null
      }
    },
    iconUp(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.iconList[index - 1]))
      this.updateActionDate.data.info.iconList[index - 1].name = this.updateActionDate.data.info.iconList[index].name
      this.updateActionDate.data.info.iconList[index - 1].imgUrl = this.updateActionDate.data.info.iconList[index].imgUrl
      this.updateActionDate.data.info.iconList[index - 1].url = this.updateActionDate.data.info.iconList[index].url
      this.updateActionDate.data.info.iconList[index].name = data.name
      this.updateActionDate.data.info.iconList[index].imgUrl = data.imgUrl
      this.updateActionDate.data.info.iconList[index].url = data.url
    },
    iconDown(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.iconList[index + 1]))
      this.updateActionDate.data.info.iconList[index + 1].name = this.updateActionDate.data.info.iconList[index].name
      this.updateActionDate.data.info.iconList[index + 1].imgUrl = this.updateActionDate.data.info.iconList[index].imgUrl
      this.updateActionDate.data.info.iconList[index + 1].url = this.updateActionDate.data.info.iconList[index].url
      this.updateActionDate.data.info.iconList[index].name = data.name
      this.updateActionDate.data.info.iconList[index].imgUrl = data.imgUrl
      this.updateActionDate.data.info.iconList[index].url = data.url
    },

    toEditPage(index) {
      if(index!=null)this.updatePageActionDate.data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.pageList[index]))
      else this.updatePageActionDate.data={
        url:null,
        name:null
      }

      this.updatePageActionDate.index = index
      this.updatePageActionDate.state = true;
    },
    toSubmitEditPage() {

      if(this.updatePageActionDate.data.name==null||this.updatePageActionDate.data.name.toString().trim().length==0){
        this.$notification.warning({
          message:'请填写名字'
        })
        return
      }
      if(this.updatePageActionDate.data.url==null||this.updatePageActionDate.data.url.toString().trim().length==0){
        this.$notification.warning({
          message:'请填写链接'
        })
        return
      }

      if(this.updatePageActionDate.index!=null){
        this.updateActionDate.data.info.pageList[this.updatePageActionDate.index].name = this.updatePageActionDate.data.name
        this.updateActionDate.data.info.pageList[this.updatePageActionDate.index].url = this.updatePageActionDate.data.url
      }else {
        this.updateActionDate.data.info.pageList.push(this.updatePageActionDate.data)
      }
      this.updatePageActionDate = {
        state: false,
        index: null,
        data: null
      }
    },
    toDeletePage(index) {
      this.updateActionDate.data.info.pageList.splice(index, 1)
    },
    toCancelEditPage() {
      this.updatePageActionDate = {
        state: false,
        index: null,
        data: null
      }
    },
    pageUp(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.pageList[index - 1]))
      this.updateActionDate.data.info.pageList[index - 1].name = this.updateActionDate.data.info.pageList[index].name
      this.updateActionDate.data.info.pageList[index - 1].url = this.updateActionDate.data.info.pageList[index].url
      this.updateActionDate.data.info.pageList[index].name = data.name
      this.updateActionDate.data.info.pageList[index].url = data.url
    },
    pageDown(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data.info.pageList[index + 1]))
      this.updateActionDate.data.info.pageList[index + 1].name = this.updateActionDate.data.info.pageList[index].name
      this.updateActionDate.data.info.pageList[index + 1].url = this.updateActionDate.data.info.pageList[index].url
      this.updateActionDate.data.info.pageList[index].name = data.name
      this.updateActionDate.data.info.pageList[index].url = data.url
    },



    handleUploadMainImage(e) {
      let _this = this;
      let form = new FormData();
      form.set('photo', e.file);
      uploadPhoto(form).then((res) => {
        _this.updateIconActionDate.data.imgUrl = res.data
      })
    },
    handleMainImageChange({fileList}) {
      if (!this.updateActionDate.state) return;
      if (fileList.length == 0) {
        this.updateIconActionDate.data.imgUrl = null
      } else {
        this.updateIconActionDate.data.imgUrl = fileList[0].url
      }
    },
  },
  computed: {
    mainImage() {
      if (this.updateIconActionDate.data == null || this.updateIconActionDate.data.imgUrl == null){
        return []
      }
      else {
        return [{
          name: this.updateIconActionDate.data.imgUrl,
          uid: -1,
          status: 'done',
          url: this.updateIconActionDate.data.imgUrl
        }]
      }
    }
  }
}
</script>

<style scoped>

</style>